import React, { Component } from 'react';

class SignupPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Email: '',
      password: ''
    }
  }
  
  handleSignup = (event) => {
    event.preventDefault()    // 阻止提交
    console.log(this.state)
  }

  handleEmail = (e) => {
    this.setState({
      Email: e.target.value
    });
  }
  handlePassword = (e) => {
    this.setState({
      password: e.target.value
    })
  }

  render() {
    return (
      <div className="text-center">
        <form className="form-signin">
          <img className="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72" />
          <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
          <input type="email" className="form-control" onChange={this.handleEmail} value={this.state.Email} placeholder="Email address" autoFocus="" />
          <input type="password" className="form-control" onChange={this.handlePassword} value={this.state.password} placeholder="Password" />
          <div className="checkbox mb-3">
            <label>
              <input type="checkbox" value="remember-me" /> Remember me
            </label>
          </div>
          <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={this.handleSignup}>Sign in</button>
          <p className="mt-5 mb-3 text-muted">© 2017-2018</p>
        </form>
      </div>
    );
  }
}

export default SignupPage;
